<template>
  <div class="userInfo" :style="`background-image:url(${userHead})`">
    <!-- <van-image width="10rem" height="4rem" fit="contain" :src="userHead" /> -->
    <p class="setting"><van-icon name="setting-o" /></p>
    <div class="author_pic">
      <img :src="user" alt="">
      <p>{{ nickname }}</p>
    </div>
  </div>
</template>

<script>
import userHead from '@/assets/user_head_bg.png'

export default {
  name: 'UserInfo',
  components: {
  },
  data () {
    return {
      userHead: userHead,
      user: '',
      nickname: ''
    }
  },
  watch: {

  },
  mounted () {
    this.user = JSON.parse(window.localStorage.getItem('userInfo')).avatarUrl
    this.nickname = JSON.parse(window.localStorage.getItem('userInfo')).nickName
  },
  methods: {

  }
}

</script>
<style scoped lang='scss'>
.userInfo{
  position: relative;
  width: 100%;
  height: 150px;
  color:#fff;
  background-repeat: no-repeat;
  background-size: cover;
  // background: url('@/assets/user_head_bg.png');
  .setting{
    padding-right: 15px;
    padding-top: 10px;
    text-align: right;
    .van-icon-setting-o{
      font-size: 24px;
    }
  }
  .author_pic{
    font-size: 16px;
    margin-top: -15px;
    text-align: center;
    img{
      display: inline-block;
      width: 55px;
      height: 54px;
      border-radius: 50%;
      margin-bottom: 10px;
    }
  }
}
</style>
